<template>
    <div class="data-table">
        <popup ref="popupRef" :clickModalClose="false" title="选择表" width="900px" :async="true" @confirm="handleConfirm">
            <template #trigger>
                <slot></slot>
            </template>
            <el-form class="ls-form" :model="formData" inline>
                <el-form-item label="表名称">
                    <el-input class="w-[280px]" v-model="formData.name" clearable @keyup.enter="resetPage" />
                </el-form-item>
                <el-form-item label="表描述">
                    <el-input class="w-[280px]" v-model="formData.comment" clearable @keyup.enter="resetPage" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="resetPage">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                </el-form-item>
            </el-form>
            <div class="m-4" v-loading="pager.loading">
                <el-table height="400" size="large" :data="pager.lists" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" />
                    <el-table-column label="表名称" prop="name" min-width="150" />
                    <el-table-column label="表描述" prop="comment" min-width="160" />
                    <el-table-column label="创建时间" prop="create_time" min-width="180" />
                </el-table>
            </div>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </popup>
    </div>
</template>

<script lang="ts" setup>
import Popup from "@/components/popup/index.vue"
import Pagination from "@/components/pagination/index.vue"
import { usePaging } from "@/hooks/usePaging"
import { dataTable, selectTable } from "@/api/tools/code"
import feedback from "@/utils/feedback"

const emit = defineEmits<{
    (event: "success"): void
}>()

const popupRef = shallowRef<InstanceType<typeof Popup>>()

const formData = reactive({
    name: "", // 表名称
    comment: "" // 表描述
})

const { pager, getLists, resetParams, resetPage } = usePaging({
    fetchFun: dataTable,
    params: formData,
    size: 10
})

const selectData = ref<any[]>([])

const handleSelectionChange = (val: any[]) => {
    selectData.value = val.map(({ name, comment }) => ({
        name,
        comment
    }))
}

const handleConfirm = async () => {
    if (!selectData.value.length) return feedback.msgError("请选择数据表")
    await selectTable({
        table: selectData.value
    })
    popupRef.value?.close()
    emit("success")
}

watch(
    () => popupRef.value?.visible,
    (value) => {
        if (value) getLists()
    }
)
</script>
